<template>
  <div class="forum-page" style="padding:30px;">
    <!-- key就是防止组件缓存导致编辑器不能正常使用，每次切换来都更改key,使其重新渲染 -->
    <editor id="tinymceEditor" :init="tinymceInit" :key="tinymceFlag" v-model="tinymceContent"></editor>
  </div>
</template>
<script>
import _ from "lodash";
import tinymce from "tinymce/tinymce";
import "tinymce/themes/silver";
import Editor from "@tinymce/tinymce-vue";
export default {
  name: "forum",
  components: { Editor },
  data() {
    return {
      tinymceContent: `<!DOCTYPE html>
        <html>
        <head>
        </head>
        <body>
        <p>123</p>
        </body>
        </html>`,
      tinymceFlag: 1,
      tinymceInit: {}
    };
  },
  mounted() {
    this.tinymceInit = {
      language: "zh_CN",
      height: 500,
      theme: "silver",
      browser_spellcheck: true, // 拼写检查
      branding: true, // 去水印
      // elementpath: false,  //禁用编辑器底部的状态栏
      statusbar: false, // 隐藏编辑器底部的状态栏
      paste_data_images: true, // 允许粘贴图像
      menubar: true, // 隐藏最上方menu
      fontsize_formats:
        "12px 13px 14px 15px 16px 17px 18px 20px 22px 24px 26px 30px 35px 40px 50px",
      plugins:
        "print preview fullpage searchreplace autolink directionality visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount  imagetools  contextmenu colorpicker textpattern help code",
      toolbar:
        "formatselect | bold italic strikethrough forecolor backcolor fontsizeselect | link image  | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat| code",

      //   skin: "lightgray",
      paste_webkit_styles: true,
      content_css: [
        // '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
        // '//www.tinymce.com/css/codepen.min.css'
      ],
      contextmenu: `inserttable | cell row column deletetable`,
      relative_urls: false,
      remove_script_host: false,
      images_upload_handler: (blobInfo, success, failure) => {
        let fd = new FormData();
        fd.append("file", blobInfo.blob());
        console.log(fd, "图片");
      },
      init_instance_callback: editor => {
        this.formEditor = editor;
        if (this.tinymceContent) {
          editor.setContent(this.tinymceContent, { format: "raw" });
        }
        // editor.on("change", () => {
        //   console.log(this.tinymceContent);
        // });
      }
    };this.tinymceFlag++;
  },
  beforeDestroy() {
    this.formEditor && this.formEditor.destroy();
  },
  activated() {
    this.tinymceFlag++;
  }
};
</script>